<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 层次选择器</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <style type="text/css"> .selected{background-color: gray;}</style>

    <script>
        //问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果
        $(function () {
            console.log($('ul li'));
            //问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果

            console.log($('#myul>li'));
            //问题 3：获取所有 label 元素后的 input 元素，并打印分析结果

            console.log($('label~input'));
            // 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
            console.log($('label+input'));

        })




    </script>
</head>
<body>
<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>
<label>LABEL1</label>
<input type="text" value="text1"/>
<input type="text" value="text2"/>
<br/>
<label>LABEL2</label>
<input type="text" value="text3"/>
<input type="text" value="text4"/>
<br/>
<label>
    LABEL3
    <input type="text" value="text5"/>
    <input type="text" value="text6"/>
</label>
<hr/>
<div>
    <p>

    </p>
    <p>

    </p>
    <p>

    </p>
    <p>

    </p>
</div>
</body>
</html>
